<template>
	<div id="navbar">
		<ul class="clear">
			<li v-for="key in navList" class="fl" @click="toPages">
				<!--<img :src="key.src" />-->
				<p>{{key.name}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'navbar',
		data() {
			return {
				navList: [{
						name: '首页',
					},
					{
						name: '我的',
					},
				]
			}
		},
		methods: {
			toPages: function(e) {
				// 此方法用于跳转页面，并更改高亮图标
				var tar = e.currentTarget.children[0].innerHTML;
				switch(tar) {
					case '首页':
						this.$router.push({
							path: '/home'
						});
						break;
					case '我的':
						this.$router.push({
							path: '/account'
						});
						break;
				}
			}
		},
		computed:{
			routepath(){
				return this.$route.path;
			}
		},
		watch:{
			routepath:function(n,o){
				switch(n){
					case '/home':
						$('#navbar ul li>p').removeClass('current');
						$('#navbar ul li:nth-child(1)>p').addClass('current');
						break;
					case '/account':
						$('#navbar ul li>p').removeClass('current');
						$('#navbar ul li:nth-child(2)>p').addClass('current');
						break;
				}
			}
		},
		mounted: function() {
			//导航被挂载的时候,判定哪个按钮进行高亮
			var path = this.$route.path;
			switch(path) {
				case '/home':
					$('#navbar ul li>p').removeClass('current');
					$('#navbar ul li:nth-child(1)>p').addClass('current');
					break;
				case '/account':
					$('#navbar ul li>p').removeClass('current');
					$('#navbar ul li:nth-child(2)>p').addClass('current');
					break;
				default:
					$('#navbar ul li>p').removeClass('current');
					$('#navbar ul li:nth-child(1)>p').addClass('current');
					break;
			}
		}
	}
</script>

<style lang="scss" scoped="" type="text/css">
	@import url("../assets/css/index.css");
	$colorRed: red;
	#navbar {
		height: 0.8rem;
		line-height: 0.8rem;
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #000;
		ul {
			li {
				height: 0.8rem;
				line-height: 0.8rem;
				font-size: 0.28rem;
				width: 50%;
				text-align: center;
				color: #fff;
				.current {
					color: red;
				}
			}
		}
				
	}
	
	
	
</style>

